<template>
    <div>
        <echartsLayout :formState="false" :tableState="false">
            <div slot="form">
                <el-form :model="query" ref="form" label-width="40px" label-position="right" >
                    <el-row :gutter="41">
                        <el-col :span="7">
                            <el-form-item label="科目">
                               <el-select v-model="query.subjectId" placeholder="请选择科目" style="width:100%" >
                                    <el-option
                                        v-for="item in subjectList"
                                        :key="item.summaryKey"
                                        :label="item.summaryName"
                                        :value="item.summaryKey">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="7">
                            <el-form-item label="月份">
                                <el-date-picker
                                    v-model="query.month"
                                    type="month"
                                    :clearable="false"
                                    :editable="false"
                                    :picker-options="pickerOptions"
                                    placeholder="请选择月份"  style="width:100%">
                                </el-date-picker>
                            </el-form-item>
                        </el-col>
                        <el-col :span="10">
                             <div class="btn-query">
                                <el-button type="primary" class="btn-common" @click="queryData">查询</el-button>
                            </div>
                        </el-col>
                    </el-row> 
                </el-form>
            </div>
            <!--表格 start-->
            <div slot="table">
                <div class="table-title">
                    <export-excel @ee="exportExcel"></export-excel>
                </div> 
                <el-table :data="dateList" border v-loading="loading" style="width: 100%" @sort-change="sortTable">
                    <el-table-column label="正确率" align="center" sortable="custom"  prop="percentage">
                        <template scope="scope">
                            <span>{{ scope.row.percentage | isNull}}</span>
                        </template>
                    </el-table-column>

                    <el-table-column label="练习次数" align="center" sortable="custom" prop="userNumber">
                        <template scope="scope">
                            <span>{{scope.row.userNumber | isNull}}</span>
                        </template>
                    </el-table-column>

                    <el-table-column label="知识点" align="center">
                        <template scope="scope">
                            <span>{{scope.row.tag | isNull}}</span>
                        </template>
                    </el-table-column>
    
                    <el-table-column label="科目" align="center">
                        <template scope="scope">
                            <span>{{scope.row.subject | isNull}}</span>
                        </template>
                    </el-table-column>
                </el-table>
                <div class="pagination-container">
                    <el-pagination
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="pageQuery.total"
                        :current-page.sync="pageQuery.currentpage"
                        :page-sizes="config.pageSizes"
                        :page-size="config.pageSize"
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange">
                    </el-pagination>
                </div>
            </div>
            <!--表格 end-->
        </echartsLayout>
    </div>
</template>

<script>
import moment from 'moment';
import exportExcel from 'components/ExportExcel/index';
import { mapState, mapActions } from 'vuex';
import echartsLayout from 'components/TableLayout/echartsLayout'; 
import { listSubject } from 'api/common.js';
import { pageTagTop } from 'api/manageAnalysis';
export default {
    name: 'knowledgeExerciseList',
    components: {echartsLayout, exportExcel},
    data() {
        return {
            subjectList: [],
            query: {
                subjectId: '', // 科目
                month: new Date()
            },
            dateList: [],
            pageQuery: {
                total: 0,
                currentpage: 1
            },
            loading: false,
            timesStatus: '1',
            percentTageStatus: '',
            pickerOptions: {
                disabledDate(time) {
                    return time.getTime() > Date.now();
                }
            }
        }
    }, 
    created() {
        this.getListSubject();
        this.queryData();
    },
    computed: {
        ...mapState({
            config: state => state.config.table
        })
    },
    methods: {
        ...mapActions(['ChangePageSize']),
        handleSizeChange(val) {
            this.pageQuery.currentpage = 1;
            this.ChangePageSize(val);
            this.queryData();
        },
        handleCurrentChange(val) {
            this.pageQuery.currentpage = val;
            this.queryData();
        },

        // 获取科目名称
        getListSubject() {
            listSubject().then(res => {
                this.subjectList = res.data.content;
                this.subjectList.unshift({
                    createTime: '',
                    summaryCode: '',
                    summaryKey: '',
                    summaryMark: '',
                    summaryName: '请选择'
                })
            })
        },
       
        // 查询
        queryData() {

            let subjectId = this.query.subjectId;
            let month = this.query.month?moment(new Date(this.query.month)).format('YYYY-MM'):moment(new Date()).format('YYYY-MM');
            let percentTageStatus = this.percentTageStatus; // "正确率排序" 
            let timesStatus = this.timesStatus;// "练习次数排序",
            this.loading = true;
            pageTagTop(this.pageQuery.currentpage, this.config.pageSize, subjectId, month, percentTageStatus, timesStatus).then(response => {
                this.loading = false;
                this.dateList = [];
                if (response.data.content) {
                    this.dateList = response.data.content.list;
                    this.pageQuery.total = response.data.content.pagination.total;
                }
            }).catch(() => {
                this.dateList = [];
                this.loading = false;
            });
        },

        sortTable({ column, prop, order }) {
            this.percentTageStatus = prop != 'percentage'?'':order=='ascending'?'0':'1';
            this.timesStatus = prop != 'userNumber'?'':order=='ascending'?'0':'1';
            this.queryData();
        },

        // 导出
        exportExcel() {
            let subjectId = this.query.subjectId;
            let month = this.query.month?moment(new Date(this.query.month)).format('YYYY-MM'):moment(new Date()).format('YYYY-MM');
            let percentTageStatus = this.percentTageStatus; // "正确率排序" 
            let timesStatus = this.timesStatus;// "练习次数排序",
            window.location.href = `${LOCAL_API.cm}/report/exportTagTop?subjectId=${subjectId}&timeRange=${month}&percentTageStatus=${percentTageStatus}&timesStatus=${timesStatus}`; 
        }

    }
}
</script>

<style lang="scss" scoped>
.btn-query{
    float:right;
}
</style>